<template>
  <div
    id="cesiumContainer"
    ref="cesiumContainer"
  ></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';

// 设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MmE4NGIxYi0xODY1LTQ5ZDEtODRkZi1jMDE4NDA0YTM3MWQiLCJpZCI6MjI2NDA2LCJpYXQiOjE3MjAwODg4NzZ9.EBKimXGOflvb9c_IBerc9T3knO7XZvUt-RffbhKELVE';
// 设置cesium静态资源路径
window.CESIUM_BASE_URL = '/';
// 设置相机默认视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,
  20.4,
  110.4,
  61.2
);

onMounted(() => {
  var viewer = new Cesium.Viewer('cesiumContainer', {});

  // 隐藏cesium logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';
  // 坐标系
  // 1、屏幕坐标系，二维笛卡尔坐标系，Cartesian2类型
  // 2、地理坐标系，WGS-84坐标系，Cartographic类型，经度、纬度、高度
  // 3、笛卡尔空间直角坐标系，Cartesian3类型

  // 角度转弧度
  var radians = Cesium.Math.toRadians(90);
  // 弧度转角度
  var degress = Cesium.Math.toDegrees(2 * Math.PI);
  // 将笛卡尔坐标系转为经纬度
  var cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
  // 将经纬度坐标（以度为单位）转换为Cesium中的三维笛卡尔坐标（Cartesian3）
  var cartesian3 = Cesium.Cartesian3.fromDegrees(116, 39.90931, 100);
});
</script>

<style></style>
